<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    name="description"
    content="页面具体描述信息"
  >
  <meta
    name="keywords"
    content="关键字"
  >
  <title>Document</title>
  <link
    rel="shortcut icon"
    href="favicon.ico"
    type="image/x-icon"
  >
  <link
    rel="stylesheet"
    href="./css/base.css"
  >
  <link
    rel="stylesheet"
    href="./css/common.css"
  >
  <link
    rel="stylesheet"
    href="./css/index.css"
  >
</head>

<body>
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#"><span></span>请先登录</a></li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="header wrapper">
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </div>
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">餐厨</a></li>
        <li><a href="#">电器</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#">洗护</a></li>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <div class="search">
      <input
        type="text"
        placeholder="搜一搜"
      >
      <span></span>
    </div>
    <div class="car">
      <span>2</span>
    </div>
  </div>
  <!-- banner 侧导航 轮播图区域 -->
  <div class="banner">
    <div class="wrapper">
      <ul>
        <li><a href="#"><img
              src="./uploads/banner_1.png"
              alt=""
            ></a></li>
      </ul>
      <!-- 侧导航 -->
      <div class="aside">
        <ul>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
        </ul>
      </div>
      <!-- 轮播图中的箭头 -->
      <a
        href="#"
        class="next"
      ></a>
      <a
        href="#"
        class="prev"
      ></a>
      <!-- 轮播图中的圆点 -->
      <ol>
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
      </ol>
    </div>
  </div>
  <!--  新鲜好物-->
  <div class="goods wrapper">
    <div class="hd">
      <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
      <a href="#">查看全部</a>
    </div>
    <div class="bd clearfix">
      <ul>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_2.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_4.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_1.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_3.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 生鲜 -->
  <div class="shengxian wrapper">
    <div class="hd">
      <h2>生鲜</h2>
      <a
        href="#"
        class="more"
      >查看全部</a>
      <ul>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
      </ul>
    </div>
    <div class="bd clearfix">
      <div class="left">
        <a href="#"><img
            src="./uploads/fresh_goods_cover.png"
            alt=""
          ></a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
          <li>
            <a href=""><img
                src="./uploads/fresh_goods_4.jpg"
                alt=""
              >
              <p>渔公码头</p>
              <p> 大连鲜食入味</p>
              <p>辽参刺参 </p>
              <div>￥ <span>899</span></div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 版权区域 -->
  <div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li>
            <span>价格亲民</span>
          </li>
          <li>
            <span>物流快捷</span>
          </li>
          <li>
            <span>品质新鲜</span>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <p>
          <a href="#">关于我们</a> |
          <a href="#">帮助中心</a> |
          <a href="#">售后服务</a> |
          <a href="#">配送与验收</a> |
          <a href="#">商务合作</a> |
          <a href="#">搜索推荐</a> |
          <a href="#">友情链接</a> |
        </p>
        <p>CopyRight @ 小兔鲜儿</p>
      </div>
    </div>
  </div>
</body>

</html>